import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene()

{
  const geometry = new THREE.BoxGeometry(100, 100, 100)
  const material = new THREE.MeshLambertMaterial({
    color: new THREE.Color('orange')
  })
  const mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(0, 0, 0)
  scene.add(mesh)
}

{
  const pointLight = new THREE.PointLight(0xffffff, 10000)
  pointLight.position.set(80, 80, 80)
  scene.add(pointLight)
}

{
  const axesHelper = new THREE.AxesHelper(200)
  scene.add(axesHelper)
}

{
  const width = window.innerWidth
  const height = window.innerHeight

  /**
   * @param fov 视图角度 看的范围
   * @param aspect 宽高比 看的这片区域的宽高比 （默认是window.innerWidth / window.innerHeight）
   * @param near 近端 看的最近的地方
   * @param far 远端 看的最远的地方
   */
  const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000)
  camera.position.set(200, 200, 200)
  camera.lookAt(0, 0, 0)

  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(width, height)

  function render() {
    renderer.render(scene, camera)
    requestAnimationFrame(render)
  }

  render()

  document.body.append(renderer.domElement)

  // 控制器
  const controls = new OrbitControls(camera, renderer.domElement)
}

/**
 * 在 Scene 中添加各种 Mesh，每个 Mesh 都是由几何体 Geometry 和材质 Material 构成，
 * 设置相机 Camera 的角度和可视范围，设置灯光 Light 的位置，
 * 然后通过渲染器 Renderer 渲染到 canvas 元素上，把这个 canvas 挂载到 dom。
 */

/** 笔记
 * 1. 创建场景 scene = new THREE.Scene()  场景可以理解为是一个容器，可以往里面添加各种物体及灯光
 *
 * 2. 创建几何体 geometry = new THREE.BoxGeometry(100, 100, 100) 几何体是三维物体的形状，由顶点 Vertex 和面 Face 构成
 *
 * 3. 创建材质 material = new THREE.MeshLambertMaterial({ color: new THREE.Color('orange') }) 材质是三维物体的颜色，由颜色 Color 和透明度 Alpha 构成
 *
 * 4. 创建Mesh mesh = new THREE.Mesh(geometry, material)  Mesh 是三维物体，由几何体 Geometry 和材质 Material 构成
 *
 * 5. 创建灯光 light = new THREE.PointLight(0xffffff, 10000) 灯光是三维物体的光源，由颜色 Color 和强度 Intensity 构成
 *
 * 6. 创建相机 camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000) 相机是三维物体的视角，由视图角度 Fov 和宽高比 Aspect 和近端 Near 和远端 Far 构成
 *
 * 7. 创建渲染器 renderer = new THREE.WebGLRenderer()
 *
 * 8. 将相机和场景添加到渲染器中 renderer.render(scene, camera)
 *
 * 9. 将渲染器添加到dom中 document.body.append(renderer.domElement)
 *
 * 10. 创建控制器 controls = new OrbitControls(camera, renderer.domElement) 控制器是三维物体的控制器，由相机 Camera 和渲染器 Renderer 构成
 *      注意：控制器需要单独引入，且如果需要控制器生效，需要循环调用requestAnimationFrame(render)
 *
 * 11. 辅助坐标轴 axesHelper = new THREE.AxesHelper(200) 辅助坐标轴是三维物体的辅助坐标轴，由轴线 Axis 和长度 Length 构成
 *
 */
